<!-- register.html 修改后的内容 -->
{% extends "base.html" %}
{% block content %}
<style>
    .form-group {
        position: relative;
    }
    .form-control {
        width: 100% !important;
        min-height: 42px;
    }
    label {
        display: block;
        margin-bottom: 8px;
    }
    input[readonly] {
        background-color: #f8f9fa;
        cursor: not-allowed;
    }
    /* 新增错误提示样式 */
    .errorlist {
        color: #dc3545;
        padding-left: 0;
        list-style: none;
        font-size: 0.875em;
        margin-top: 4px;
    }
    .alert-danger {
        padding: 8px 12px;
        margin-top: 5px;
        border-radius: 4px;
    }
</style>

<div class="container">
  <div class="row justify-content-center mt-5">
    <div class="col-md-6 col-lg-4">
      <div class="card shadow">
        <div class="card-header bg-primary text-white py-3">
          <h3 class="h5 mb-0 text-center">用户注册</h3>
        </div>
        <div class="card-body">
          <form method="post">
            {% csrf_token %}

            <!-- 全局错误提示 -->
            {% if form.non_field_errors %}
              <div class="alert alert-danger">
                {% for error in form.non_field_errors %}
                  {{ error }}
                {% endfor %}
              </div>
            {% endif %}

            <div class="row g-3">
              <!-- 用户名 -->
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label">用户名</label>
                  {{ form.username }}
                  {{ form.username.errors }}
                </div>
              </div>

              <!-- 电子邮箱 -->
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label">电子邮箱</label>
                  {{ form.email }}
                  {{ form.email.errors }}
                </div>
              </div>

              <!-- 密码 -->
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label">密码</label>
                  {{ form.password1 }}
                  {{ form.password1.errors }}
                </div>
              </div>

              <!-- 确认密码 -->
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label">确认密码</label>
                  {{ form.password2 }}
                  {{ form.password2.errors }}
                </div>
              </div>

              <!-- 邀请人 -->
              <div class="col-12">
                <div class="form-group">
                  <label class="form-label">邀请人</label>
                  {% if form.inviter_code.value %}
                    <input type="text"
                           class="form-control"
                           value="{{ form.inviter_code.value }}"
                           readonly
                           style="background-color: #f8f9fa;">
                    <input type="hidden"
                           name="{{ form.inviter_code.name }}"
                           value="{{ form.inviter_code.value }}">
                    <small class="form-text text-success d-block mt-2">
                      ✅ 您正在通过邀请链接注册
                    </small>
                  {% else %}
                    {{ form.inviter_code }}
                    {{ form.inviter_code.errors }}
                    <small class="form-text text-muted d-block mt-2">
                      输入已注册的用户名作为邀请人（可不填）
                    </small>
                  {% endif %}
                </div>
              </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 mt-4 py-2">
              立即注册
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}